<style type="text/css">
    .captcha_img {
        max-height: 100px;
        max-width: 100px;
        margin: 20px;
    }

    #captcha_container {
        width: 300px;
        margin: auto;
        border: thin #3333ff solid;
        background-color: #cccccc;

        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    #cap_submit {
        margin: 10px;
    }
</style>
<script type="text/javascript">
    $('#cap_submit').click(function() {
        var left = $('#cap_left');
        var right = $('#cap_right');
        var side = '<?=$side?>';
        var word = '<?=$img_perm_key?>';
        var temp_id = '<?=$img_temp_id?>';
        if (left.val() == '' || right.val() == '') {
            alert('Please enter both captcha!');
        } else {
            $('#cap_result').load('<?=site_url('index/validate_captcha')?>',{
                                     'left':left.val(),
                                     'right':right.val(),
                                     'side':side,
                                     'word':word,
                                     'temp_id':temp_id});
        }
        return false;
    });
</script>
<div id="captcha_container">
    <h3>Pass the Captcha</h3>
    <?if ($side == 0): ?>
    <img src="<?=$img_perm_url?>" class="captcha_img"/>
    <img src="<?=$img_temp_url?>" class="captcha_img"/>
    <? else: ?>
    <img src="<?=$img_temp_url?>" class="captcha_img"/>
    <img src="<?=$img_perm_url?>" class="captcha_img"/>
    <?endif?>
    <div style="text-align:center">
        <?= form_open() ?>
        <label>Left </label><br/>
        <?= form_input('cap_left', '', 'id="cap_left"') ?><br/>
        <label>Right</label><br/>
        <?= form_input('cap_right', '', 'id="cap_right"') ?><br/>
        <?= form_submit('', 'Submit', 'id="cap_submit"')?>
        <div id="cap_result">

        </div>
        <?= form_close() ?>
    </div>

</div>